<template>
	<view class='page_cont'>
		<view class='welf_wrap'>
			<view class='title'>请选择福利标签</view>
			<view class='item_wrap'>
				<view class='item_box' :class="item.check?'active':''" v-for="(item,index) in welfs" :key="index" @click="check_welf(item,index)">
					<view class='item'>
						<image class='icon' :src="item.check?'/static/icon11.png':'/static/icon10.png'"></image>
						<view class='text'>{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class='welf_point'>
			<view class='title'>福利说明</view>
			<!-- <view class='text'>工作待遇：</view> -->
			<!-- <view class='text' v-for="(item,index) in welfareExplain" :key="index">{{index+1}}. {{item}}</view> -->
			<textarea class='input' :focus="true" @input="input_text" :value="text" maxlength="-1" placeholder="请输入期望福利"/>
		</view>
		<view class='con_btn' @click="confirm_welf()">保存</view>
	</view>
</template>

<script>
	import home from "../../api/home.js"
	export default{
		data(){
			return {
				welfs:[],
				ids: [],
				welfareExplain:[],
				text:'',
				focus: true,
			}
		},
		onLoad(options) {
			console.log(options);
			var that=this;
			if(options.ids){
				that.ids=options.ids.split(",");
				// this.text=options.text
				uni.getStorage({
				    key: 'text',
				    success: function (res) {
						  that.text=res.data
						  console.log(that.text);
				    }
				});
			}
			if(options.status&&options.status==2){
				uni.setNavigationBarTitle({
					title: "福利待遇"
				})
			}
			this.get_welfare_list();
		},
		methods:{
			// 选择
			check_welf(item,index){
				item.check=!item.check
				if(item.check){
					this.welfareExplain.push(item.welfareExplain)
				}else{
					const idx = this.welfareExplain.indexOf(item.welfareExplain)
					this.welfareExplain.splice(idx, 1); 
				}
			},
			// 保存
			confirm_welf(){
				var welf='',welfareIds='';
				this.welfs.forEach((item,index)=>{
					if(item.check){
						welf=welf+','+item.name;
						welfareIds=welfareIds+','+item.id;
					}
				})
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.welfs=welf.substr(1);
				prevPage.$vm.welfareIds=welfareIds.substr(1);
				// prevPage.$vm.text=this.text
				prevPage.$vm.welfareDetail=this.text
				uni.setStorage({
				    key: 'text',
				    data: this.text,
				    success: function () {
				    }
				})
				uni.navigateBack({
					delta: 1
				})
			},
			// 福利列表
			get_welfare_list(){
				var params={
					"businessId": ''
				}
				home.get_welfare_list(params).then(res=>{
					var list=res.data.data;
					list.forEach((item)=>{
						item.check=false;
						this.ids.forEach((itm)=>{
							if(item.id==itm){
								item.check=true;
								this.welfareExplain.push(item.welfareExplain)
							}
						})
					})
					this.welfs=list;
				})
			},
			// 填写期望福利
			input_text(e){
				this.text=e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	.page_cont{
		width: 100%;
		padding: 18rpx 32rpx 170rpx 32rpx;
		box-sizing: border-box;
		.welf_wrap{
			width: 100%;
			padding-bottom: 36rpx;
			.title{
				text-align: left;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #3F4A58;
				margin-bottom: 32rpx;
			}
			.item_wrap{
				width: 100%;
				overflow: hidden;
				.item_box{
					display: inline-block;
					padding: 16rpx 20rpx;
					margin-right: 26rpx;
					margin-bottom: 24rpx;
					border-radius: 8rpx;
					background: #F6F7F9;
					.item{
						display: flex;
						flex-direction: row;
						align-items: center;
						.icon{
							width: 42rpx;
							height: 42rpx;
							margin-right: 16rpx;
						}
						.text{
							height: 34rpx;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 34rpx;
							color: #798594;
						}
					}
				}
				.active{
					background: rgba(91,144,255,0.11);
					.item{
						.text{
							color: #5B90FF;
						}
					}
				}
			}
		}
		.welf_point{
			width: 100%;
			.title{
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #3F4A58;
				margin-bottom: 32rpx;
			}
			.text{
				font-size: 28rpx;
				font-weight: 400;
				line-height: 42rpx;
				color:rgba(121,133,148,0.5);
				margin-bottom: 16rpx;
			}
		}
		.con_btn{
			position: fixed;
			bottom: 48rpx;
			left: 0;
			right: 0;
			margin: 0 32rpx;
			height: 104rpx;
			text-align: center;
			line-height: 104rpx;
			background: #5B90FF;
			border-radius: 16rpx;
			color: #fff;
			font-size: 36rpx;
			font-weight: 400;
		}
	}
</style>
